<template>
	<div class="contain">
		<div class="contain-header">
			<el-form  label-width="50px" inline >
				<el-form-item label="班级:">
					<el-input v-model="pageForm.name" placeholder="请输入班级名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getList">搜 索</el-button>
					<el-button  size="small" @click="resetList">重 置</el-button>
					<el-button type="primary" size="small" @click="addDialog = true">新增班级</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="contain-table">
			<div class="tab-line">
				<div class="tab-show">班级名称</div>
				<div class="tab-show">所属学校</div>
				<div class="tab-show">开班时间</div>
				<!--				<div class="tab-show">结束时间</div>-->
				<div class="tab-set">操作</div>
			</div>
			<div class="tab-body" v-for="item in list" :key="item.id">
				<div class="tab-show">{{item.className}}</div>
				<div class="tab-show">{{item.schoolName}}</div>
				<div class="tab-show">{{item.createTime}}</div>
				<!--				<div class="tab-show">2023-08-27</div>-->
				<div class="tab-set">
					<el-button type="danger" text size="default"  @click="toDetail(item.id)">学生管理</el-button>
					<el-button type="primary" text size="default" @click="openEdit(item)">编辑</el-button>
					<el-button type="primary" text size="default" @click="del(item.id)">删除</el-button>
				</div>
			</div>
		</div>
		<div class="contain-footer">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					class="mt-4"
					:page-size="5"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
			/>
		</div>
	</div>
	<el-dialog
			v-model="addDialog"
			title="新建班级"
			width="30%"
	>
		<el-form label-width="80px">
			<el-form-item label="班级名称:">
				<el-input v-model="addForm.name" placeholder="请输入学校名称" style="width: 300px" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="addDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitAdd">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="editDialog"
			title="修改班级"
			width="30%"
	>
		<el-form label-width="80px">
			<el-form-item label="班级名称:">
				<el-input v-model="editForm.name" placeholder="请输入学校名称" style="width: 300px" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted} from 'vue'
    import {classList,delClass,addClass,editClass } from "../api/classMoudles";
    import {ElMessageBox, ElNotification} from "element-plus";

    const pageForm = reactive({
        name: "",
        pageIndex: 1,
        pageSize: 5,
    })
    let list = ref([])
    let total = ref(0)
    const getList = async () => {
        const { data } = await classList(pageForm)
        if (data.statusCode === 200){
            console.log(data)
            list.value = data.data.data
            total.value = data.data.total
        }
    }
    let schList = ref([])
    const resetList = () => {
        pageForm.name = ""
        getList()
    }
    //分页
    const handleSizeChange = (val: number) => {
        pageForm.pageSize = val
        getList()
    }
    const handleCurrentChange = (val: number) => {
        pageForm.pageIndex = val
        getList()
    }
    onMounted(() => {
        getList()
    })
    //删除
    const del = (id) => {
        ElMessageBox.confirm(
            '确定删除此班级?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
                delClass(id).then(res => {
                    if (res.data.statusCode === 200){
                        ElNotification({
                            title: '提 示',
                            message: res.data.message,
                            type: 'success',
                        })
                        getList()
                    }
                })
            })
            .catch(() => {
            })
    }
    //新增
    let addDialog = ref<boolean>(false)
    let addForm = reactive({
        name:''
    })
    const submitAdd = async () => {
        if (addForm.name){
            const { data } = await addClass(addForm)
            if (data.statusCode === 200){
                ElNotification({
                    title: '提 示',
                    message: data.message,
                    type: 'success',
                })
                addDialog.value = false
                addForm.name = ''
                await getList()
            }
        }else {
            ElNotification({
                title: '提 示',
                message: '请将参数填写完整',
                type: 'error',
            })
        }
    }
    //编辑
    let editDialog = ref<boolean>(false)
    let editForm = ref({})
    const openEdit = (item) => {
        editForm.value.name = item.className
        editForm.value.id = item.id
        editDialog.value = true
    }
    const submitEdit = async () => {
        const { data } = await editClass(editForm.value)
        if (data.statusCode === 200){
            ElNotification({
                title: '提 示',
                message: data.message,
                type: 'success',
            })
            editDialog.value = false
            editForm.value = {}
            await getList()
        }
    }
    const toDetail = (id) => {
        router.push({
            path: '/newPage',
            query: {
                id
            }
        })
    }
</script>

<style scoped lang="less">
	.contain{
		position: relative;
		width: 100%;
		height: 100%;
		.contain-header{
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
		}
		.contain-table{
			margin: 0 auto 20px;
			width: 90%;
			.tab-line{
				width: 100%;
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;
				justify-content: space-between;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
				.tab-set{
					width: 25%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
			}
			.tab-body{
				width: 100%;
				display: flex;
				margin-bottom: 10px;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 20px;
				border-radius: 20px;
				box-sizing: border-box;
				.tab-show{
					width: 15%;
					text-align: center;
					font-size: 16px;
					color: #333;
				}
				.tab-set{
					width: 25%;
					text-align: center;
				}
			}
		}
		.contain-footer{
			position: absolute;
			bottom: 5%;
			left: -50%;
			transform: translateX(50%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
